<template>
	<view id="app">
		<view class="express">

			<view class="express_text" v-if="order_info.order_status == 1">待付款</view>

			<view class="express_text" v-if="order_info.order_status == 2">待发货</view>

			<view class="time_list_text" v-if="order_info.order_status == 3">待收货</view>
			<view class="time_list time_list_text"></view>

			<view class="express_text" v-if="order_info.order_status == 4">待评价</view>

			<view class="express_text" v-if="order_info.order_status == 5">已完成</view>

			<view class="express_text" v-if="order_info.order_status == 6">售后中</view>

			<view class="express_text" v-if="order_info.order_status == 7">
				<view>订单关闭</view>
			</view>


			<view class="express_text" v-if="order_info.order_status == 8">拼团中</view>

			<view class="express_text" v-if="order_info.order_status == 9">砍价中</view>

			<view class="express_text" v-if="order_info.order_status == 10">拼团失败</view>

			<view class="express_text" v-if="order_info.order_status == 11">砍价失败</view>
		</view>

		<view class="express_list displayFlex">
			<view class="icon iconfont icon-location"></view>
			<view v-for="(vo,index) in express_data" :key="index">
				<view class="flex express_list_text">
					<view>{{vo.context}}</view>
					<view class="express_time">
						<view>{{vo.time}}</view>
					</view>
				</view>
				</volist>
				<view class="icon iconfont icon-right"></view>
			</view>
		</view>


		<view class="user displayFlex">
			<view class="icon iconfont icon-deliver"></view>
			<view class="flex user_detail">
				<view class="displayFlex">
					<view class="flex">
						收货人：{{order_info.consignee}}
					</view>
					<view>{{order_info.mobile}}</view>
				</view>
				<view>收货地址：{{order_info.address}}</view>
			</view>
		</view>


		<view class="commodity">
			<view class="displayFlex">
				<view class="icon iconfont icon-shop"></view>
				<view class="file shop_name">{{store_name}}</view>
			</view>
			<view class="displayFlex">
				<view class="commodity_img">
					<img :src="order_goods.original_img">
				</view>
				<view class="flex commodity_conent">
					<view class="commodity_name">{{order_goods.goods_name}}</view>
					<view class="commodity_introduce">{{order_goods.key_name}}</view>
				</view>
				<view class="commodity_money">
					<view>￥{{order_info.goods_price}}</view>
					<view>x{{order_info.goods_num}}</view>
				</view>
			</view>
		</view>


		<view class="total_money">
			<view class="displayFlex">
				<view class="flex">运费</view>
				<view>￥{{order_info.shipping_price}}</view>
			</view>
			<view class="displayFlex">
				<view class="flex">红包抵扣</view>
				<view>￥{{order_info.redpackets_balance}}</view>
			</view>
			<view class="displayFlex">
				<view class="flex">实付款（含运费）</view>
				<view>￥{{order_info.order_amount}}</view>
			</view>
		</view>
		<view class="order_time">
			<view>订单编号：{{order_info.order_sn}}</view>
			<view>下单时间：{{order_info.add_time}}</view>
		</view>


		<view class="foot">
			<view style="display:flex;justify-content: flex-end;">
				<view class="span">
					<view>联系客服</view>
				</view>


				<view class="span" v-if="order_info.shipping_status == 1">

					查看物流
				</view>


				<view class="span" v-if="order_info.order_status == 1" @click="doDeposit()">去支付
				</view>
				<view class="span" v-if="order_info.order_status == 1" @click="cancel_order(order_info.order_id)">
					取消订单</view>


				<view class="span" v-if="order_info.order_status == 3" @click="confirm_order(order_info.order_id)">
					确认收货</view>


				<view class="span" v-if="order_info.order_status == 5 && order_info.is_comment == 0"
					onclick="comment_order(order_info.order_id)">去评价</view>


				<view class="span" v-if="order_info.order_status == 7" @click="delete_order(order_info.order_id)">
					删除订单</view>

				<view class="span" @click="share_order(order_info.order_id)"
					v-if="order_info.order_status == 8 || order_info.order_status == 9">去分享</view>


				<view class="span" v-if="order_info.order_status == 3 && is_sales == 0"
					@click="return_order(order_info.order_id)">
					申请售后</view>

				<view class="span" v-if="order_info.order_status == 5 && is_sales == 0"
					@click="return_order(order_info.order_id)">
					申请售后</view>

				<view class="span" v-if="order_info.order_status == 2 && timeout == 1"
					@click="return_order(order_info.order_id)">
					申请售后</view>

				<view class="span" style="color: red;" v-if="is_sales == 1">售后中</view>
			</view>

		</view>

		<view>

			<view :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_textarea_item">
					<view style="display:flex;justify-content: center;">
						<image :src="qrcode" style="width:150px;height:150px"></image>
					</view>
					<view>截图保存后扫码支付</view>
					<view @click="submitFeedback()" class="buttons">
						<text class="popup_button">关闭</text>
					</view>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				qrcode: '',
				userFeedbackHidden: true,
				timeout: 0,
				store_name: '',
				express_data: {},
				order_goods: {},
				order_info: {},
				is_sales: 0,
				id: null, // 订单ID
				amount: 0,
				order_sn: '',
				paytype: 'wxpay' //支付类型
			};
		},
		onLoad(options) {
			this.id = options.id || 52502;
			// 获取订单数据
			this.$api.get({
				url: 'portal/xcx/get_order_list',
				data: {
					order_id: this.id
				},
				success: res => {
					let data = res.data;
					this.order_goods = data.order_goods;
					this.order_info = data.order_info;
					this.express_data = data.express_data
					this.store_name = data.store_name
					console.log(this.order_info)
				}
			});
		},
		methods: {
			showDiv() {
				this.userFeedbackHidden = false
			},
			hideDiv() {
				this.userFeedbackHidden = true
			},
			//url:网络地址
			submitFeedback() {
				// 先下载图片
				uni.downloadFile({
					url: this.qrcode,
					success: (res) => {
						console.log(res)
						this.hideDiv()
						return;
						// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
						// #ifdef APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！",
								});
								this.hideDiv()
							},
							fail: () => {
								uni.showToast({
									title: "保存失败",
								});
							},
						});
						// #endif

						// #ifdef H5
						var imgUrl = this.qrcode;
						var down = plus.downloader.createDownload(imgUrl, {}, function(e, a) {
							console.log(e);
							plus.gallery.save(e.filename, function(e) {
								uni.showToast({
									title: "保存成功",
									mask: true,
								});
								console.log("下载成功");
								this.hideDiv()
							}, function(e) {
								console.log("下载失败,请重试");
							})
						});
						down.start();
						// #endif
					},
				});
			},
			pay_order(order_id) {
				this.$api.post({
					url: 'order/pay_order',
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.code == 1) {
							var jsApiParameters = res.data;
							//console.log(typeof WeixinJSBridge == "undefined");
							if (typeof WeixinJSBridge == "undefined") {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', jsApiCall);
									document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
								}
							} else {
								jsApiCall(jsApiParameters);
							}
						} else if (res.code == 2) {
							window.location.href = res.url;
						} else if (res.code == 3) {
							layer.msg('支付成功');
							setTimeout(function() {
								window.location.reload();
							}, 1500);
						} else {
							layer.msg(res.msg);
						}

					}
				})
			},
			/**取消订单 */
			cancel_order(order_id) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							that.$api.post({
								url: 'portal/order/cancel_order',
								data: {
									order_id: order_id
								},
								success: function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: "取消成功",
											mask: true,
										});
										uni.redirectTo({
											url:'pages/order/orderList'
										})
										// window.location.reload();
									} else {
										uni.showToast({
											title: "取消失败",
											mask: true,
										});
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			/**申请售后 */
			return_order(order_id) {
				this.$api.post({
					url: 'order/after_sales',
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.code == 1) {
							window.location.href = res.url;
						} else {
							// layer.msg(res.msg);
						}

					}
				})
			},
			/**确认收货 */
			confirm_order(order_id) {
				
				uni.showModal({
					title: '温馨提示',
					content: '是否要确认收货',
					success: function(res) {
						if (res.confirm) {
							that.$api.post({
								url: 'portal/order/delete_order',
								data: {
									order_id: order_id
								},
								success: function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: "确认收货成功",
											mask: true,
										});
										uni.redirectTo({
											url:'pages/order/orderList'
										})
										// window.location.reload();
									} else {
										uni.showToast({
											title: "确认收货失败",
											mask: true,
										});
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			/**去评价 */
			comment_order(order_id) {
				this.$api.post({
					url: "order/comment_order",
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.code == 1) {
							window.location.href = res.url;
						} else {
							// layer.msg(res.msg);
						}
					}
				})
			},
			/**删除订单 */
			delete_order(order_id) {
				
				uni.showModal({
					title: '温馨提示',
					content: '是否要删除订单',
					success: function(res) {
						if (res.confirm) {
							that.$api.post({
								url: 'portal/order/delete_order',
								data: {
									order_id: order_id
								},
								success: function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: "删除成功",
											mask: true,
										});
										uni.redirectTo({
											url:'pages/order/orderList'
										})
										// window.location.reload();
									} else {
										uni.showToast({
											title: "删除失败",
											mask: true,
										});
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			share_order(order_id) {
				this.$api.post({
					url: "order/share_order",
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.code == 1) {
							window.location.href = res.url;
						} else {
							// layer.msg(res.msg);
						}

					}
				})
			},
			doDeposit() {
				// #ifdef  H5
				uni.showLoading();
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// 公众号支付
					this.$api.pay({
						url: 'wx_pay/index/jsapi',
						data: {
							order_id: this.id,
							user_id: this.$store.state.user.id
						},
						success: res => {
							if (res.code == 1) {
								let wxpay = typeof res.data == 'string' ? JSON.parse(res.data) : res.data;
								if (typeof WeixinJSBridge == 'undefined') {
									if (document.addEventListener) {
										document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(
											wxpay), false);
									} else if (document.attachEvent) {
										document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(wxpay));
										document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(
											wxpay));
									}
								} else {
									return this.onBridgeReady(wxpay);
								}
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								});
							}
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				} else {
					// H5支付
					// #ifdef H5
					this.$api.post({
						url: 'portal/wx_order/pay_order',
						data: {
							order_id: this.id,
							user_id: this.$store.state.user.id,
							submit_type: 2
						},
						success: res => {
							if (res.code == 1) {
								// uni.redirectTo({
								// 	url: '../h5Pay/h5Pay?src=' + res.data
								// });
								this.qrcode = res.data
								this.showDiv();
							} else {
								
								uni.showToast({
									title: res.msg,
									mask: true,
								});
								// this.$refs.uToast.show({
								// 	title: res.msg,
								// 	type: 'error'
								// });
							}
						},
						complete: () => {
							uni.hideLoading();
						}
					});
					// #endif

				}
				return;
				// #endif

				// #ifdef MP-WEIXIN
				// 小程序支付
				uni.showLoading();
				this.$api.post({
					url: 'portal/order/pay_order',
					data: {
						order_id: this.id,
						submit_type: 1 //小程序支付
					},
					success: res => {
						let wxpay = res.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxpay.timeStamp,
							nonceStr: wxpay.nonceStr,
							package: wxpay.package,
							signType: wxpay.signType,
							paySign: wxpay.paySign,
							success: e => {
								this.$refs.uToast.show({
									title: '支付成功',
									type: 'success',
									callback: () => {
										uni.redirectTo({
											url: '../../order/orderDetail?id=' +
												this.id
										});
									}
								});
							},
							fail: e => {
								this.$refs.uToast.show({
									title: '支付失败',
									type: 'error'
								});
							}
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
				// #endif

				// #ifdef APP-PLUS
				// APP支付
				uni.showLoading();
				this.$api.pay({
					url: 'wx_pay/index/appPay',
					data: {
						order_id: this.id
					},
					success: res => {
						if (res.code == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: res.data,
								success: e => {
									this.$refs.uToast.show({
										title: '支付成功',
										type: 'success',
										callback: () => {
											uni.redirectTo({
												url: '../../order/orderDetail?id=' +
													this.id
											});
										}
									});
								},
								fail: e => {
									this.$refs.uToast.show({
										title: '支付失败',
										type: 'error'
									});
								}
							});
						} else {
							this.$u.toast(res.data.return_msg);
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
				// #endif
			},
			onBridgeReady(wxpay) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: wxpay.appId,
						timeStamp: wxpay.timeStamp,
						nonceStr: wxpay.nonceStr,
						package: wxpay.package,
						signType: wxpay.signType,
						paySign: wxpay.paySign
					},
					res => {
						if (res.err_msg == 'get_brand_wcpay_request:ok') {
							this.$refs.uToast.show({
								title: '支付成功',
								type: 'success',
								callback: () => {
									uni.redirectTo({
										url: '../../order/orderDetail?id=' + this.id
									});
								}
							});
							return true;
						} else {
							//支付失败
							this.$refs.uToast.show({
								title: '支付失败',
								type: 'error'
							});
						}
						return false;
					}
				);
			}
		}
	};
</script>

<style lang="scss">
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 500rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.popup_title {
		width: 480rpx;
		text-align: center;
		font-size: 32rpx;
	}



	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.popup_button {
		color: #fff;
		font-size: 36rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.buttons {
		text-align: center;
		font-size: 50rpx;
		margin-top: 40rpx;
		background-color: #007AFF;
		color: #fff;
	}

	.red_fr {
		display: flex;
		justify-content: center;
	}

	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
	}

	#app {
		/*margin: 0 10px;*/
		margin-bottom: 47px;
	}

	.commodity_img {
		width: 60px;
		height: 60px;
	}

	img {
		width: 100%;
		height: 100%;
	}

	.commodity_money {
		text-align: right;
	}

	.commodity_name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.commodity_introduce {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.commodity_conent {
		margin: 0 10px;
	}

	.express {
		background: #E02E24;
	}

	.express_text {
		color: #fff;
		margin-left: 30px;
		height: 80px;
		line-height: 80px;
	}

	.icon {
		display: flex;
		align-items: center;
	}

	.flex-box-y {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		display: -webkit-flex
	}

	.express_list {
		position: relative;
	}

	.express_list_text,
	.user_detail,
	.shop_name {
		margin: 0 10px;
	}

	.express_list,
	.user,
	.commodity,
	.total_money,
	.order_time,
	.recommend {
		padding: 10px;
		background: #fff;
	}

	.commodity,
	.total_money,
	.order_time,
	.recommend {
		margin-top: 10px;
	}

	.user {
		border-top: 1px solid #ddd;
		color: #666;
	}

	.commodity_introduce {
		font-size: 12px;
		color: #999;
	}

	.recommend {
		text-align: center;
	}

	.foot {
		position: fixed;
		bottom: 0;
		right: 0;
		background: #fff;
		width: 100%;
		text-align: right;
		padding: 14px;
	}

	.foot .span {
		padding: 6px;
		margin-left: 10px;
		border: 1px solid #f1f1f1;
		border-radius: 6px;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	a {
		color: #666;
	}

	.time_list_text {
		color: #fff;
		line-height: 40px;
		margin-left: 30px;
	}

	.block {
		width: 94%;
		padding: 0 3% 40upx 3%;

		.title {
			width: 100%;
			font-size: 34upx;
		}

		.content {
			.orderinfo {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 90upx;
					display: flex;
					align-items: center;

					.nominal {
						flex-shrink: 0;
						font-size: 32upx;
						color: #7d7d7d;
					}

					.text {
						width: 70%;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32upx;
					}
				}
			}

			.pay-list {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							height: 80upx;
						}
					}

					.center {
						width: 100%;
						font-size: 30upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #f06c7a;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}
</style>
